<template>
<div class="category-page header-page">
  <o-header v-show="thisShowOHeader"
            :showbar="showobar"
            :num="num">
  </o-header>
  <x-header :left-options="{ backText: '' }"
            :title="title"
            ref="header"
            style="z-index: 1;">
    <div slot="right"
         class="XHeaderRight"
         @click="toCategory">传输列表</div>
  </x-header>
  <scroll ref="scroll"
          wrapperStyle="height: calc(100% - 46px);"
          :scrollbar="true"
          :pullDownRefresh="true"
          @pullingDown="onPullingDown">
    <div>
      <m-tab :showbar="showbar"></m-tab>
      <group :gutter="0">
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
        <folder :checkbox="checkbox"
                :folderImg="folderImg"></folder>
      </group>
    </div>
  </scroll>
</div>

</template>

<script>
import { XHeader, Group } from 'vux';
import mTab from '../components/mTab';
import { mapState, mapActions } from 'vuex';
import folderImg from '../assets/icon_list_txtfile.png';
import folder from '../components/folder';
import oHeader from '../components/oHeader';
import Scroll from '../components/scroll';

export default {
  components: {
    XHeader,
    mTab,
    Group,
    folder,
    oHeader,
    Scroll
  },
  data() {
    return {
      checkbox: {
        check: false
      },
      folderImg,
      thisShowOHeader: false,
      showbar: [
        'Rank',
        'Search'
      ],
      num: 0
    }
  },
  computed: {
    title() {
      var title = this.$route.params.title
      if (title === 'image') {
        return '图片'
      } else if (title === 'document') {
        return '文档'
      } else if (title === 'video') {
        return '视频'
      } else if (title === 'audio') {
        return '音频'
      }
    },
    ...mapState({
          showobar: state => state.oHeader.tab,
          headerRowHeight: state => state.headerRowHeight
    })
  },
  methods: {
    ...mapActions([
          'updateHeaderHeight',
          'showOHeader'
    ]),
    refresh(done) {
      setTimeout(() => {
        done()
      }, 1500)
    },
    setStyle() {
      const top = this.$refs.header.$el.offsetHeight
      document.getElementById('oheader').style.height = top + 'px'
      this.updateHeaderHeight(top)
      this.thisShowOHeader = true
    },
    toCategory() {
      this.$router.push({
        path: '/transfer'
      })
    },
    onPullingDown() {
      // 模拟更新数据
      console.log('pulling down and load data')
      setTimeout(() => {
        this.$refs.scroll.forceUpdate()
      }, 2000)
    }
  },
  created() {
    setTimeout(() => {
      this.$root.$on('click-cell', () => {
        alert('hhhh')
      })
      this.$root.$on('longtouch-cell', () => {
        this.checkbox.check = true
      })
      this.$root.$on('hide-oheader', () => {
        this.checkbox.check = false
      })
    })
  },
  mounted() {
    setTimeout(() => {
      this.setStyle()
    }, 300)
  },
  watch: {
    'checkbox.check': function(val) {
      if (val) {
        this.showOHeader(true)
      } else {
        this.showOHeader(false)
      }
    }
  },
  destroyed() {
    this.$root.$off('click-cell')
    this.$root.$off('longtouch-cell')
    this.$root.$off('hide-oheader')
  }
}

</script>

<style>
.category-page .vux-header-right {
  top: 8px!important;
  right: 10px!important;
}

.XHeaderRight {
  color: white;
  padding: 4px 4px;
  border: 1px solid rgba(0, 0, 51, 0.2);
}

</style>
